import AppTree from './AppTree'
import VanIcon from 'vant/es/icon'
import VanRadioGroup from 'vant/es/radio-group'
import VanRadio from 'vant/es/radio'
import VanCheckBoxGroup from 'vant/es/checkbox-group'
import VanCheckBox from 'vant/es/checkbox'
import { appTreeProps, appTreeEmits, type AppTreeData } from './types'
import { ifHasChildren } from '@/utils/tree'
import type { VNode } from 'vue'

import AppTreeClass from './AppTree.module.scss'

const {
  useOpenLeave,
  useLeaveHasOpened,
  selectedList,
  initSelectedList,
  useSelectLeave
} = useTree()

export default defineComponent({
  name: 'AppTree',
  props: appTreeProps,
  emits: appTreeEmits,
  setup(props, { emit }) {
    const { data, modelValue, multiple } = toRefs(props)

    initSelectedList(multiple.value)

    const handleOpenLeave = (item: AppTreeData) => {
      useOpenLeave(item)
      emit('open', item)
    }

    const handleSelectLeave = (item: AppTreeData) => {
      useSelectLeave(item)
      emit('change', selectedList.value, item)
    }

    const AppTreeItemCheckBox = (item: AppTreeData) => {
      if (multiple.value) {
        return (
          <VanCheckBox
            name={item.value}
            onClick={() => handleSelectLeave(item)}
          />
        )
      }
      return (
        <VanRadio
          name={item.value}
          onClick={() => handleSelectLeave(item)}
        />
      )
    }

    const AppTreeTitle = (item: AppTreeData) => {
      if (ifHasChildren(item)) {
        return (
          <view class={AppTreeClass.text}>
            <VanIcon
              class={[
                AppTreeClass['app-tree__arrow-icon'],
                useLeaveHasOpened(item.value)
                  ? AppTreeClass['app-tree__selected-icon']
                  : ''
              ]}
              name="arrow-down"
              size={12}
              color="#ffffff"
            />
            <view
              class={AppTreeClass.title}
              onClick={() => handleOpenLeave(item)}
            >
              {item.label}
            </view>
          </view>
        )
      }
      return (
        <view class={AppTreeClass['app-tree__item']}>
          {AppTreeItemCheckBox(item)}
          <view class={AppTreeClass.text}>{item.label}</view>
        </view>
      )
    }

    const AppTreeChildren = (item: AppTreeData) => {
      if (ifHasChildren(item)) {
        return (
          <view
            class={[
              AppTreeClass['app-tree__children-container'],
              useLeaveHasOpened(item.value)
                ? AppTreeClass['show-children']
                : AppTreeClass['hide-children']
            ]}
          >
            <AppTree
              modelValue={modelValue.value}
              data={item.children}
            />
          </view>
        )
      }
    }

    const AppTreeContainer = (children: VNode) => {
      if (multiple.value) {
        return (
          <VanCheckBoxGroup modelValue={selectedList.value}>
            {children}
          </VanCheckBoxGroup>
        )
      }
      return (
        <VanRadioGroup modelValue={selectedList.value}>
          {children}
        </VanRadioGroup>
      )
    }

    return () => (
      <>
        {AppTreeContainer(
          <view class={AppTreeClass['app-tree__container']}>
            {data.value!.map(item => (
              <view key={item.value}>
                {AppTreeTitle(item)}
                {AppTreeChildren(item)}
              </view>
            ))}
          </view>
        )}
      </>
    )
  }
})
